<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'//导入动态样式逻辑

const router = useRouter()
const vantaEffect = ref(null)
const vantaContainer = ref(null)

const goToDataVisualization = () => {
  router.push('/home')
}

onMounted(() => {
  // 第一种初始化方式
  vantaEffect.value = BIRDS({
    el: vantaContainer.value,
    THREE: THREE
  })
})

onBeforeUnmount(() => {
  if (vantaEffect.value && typeof vantaEffect.value.destroy === 'function') {
    try {
      vantaEffect.value.destroy()
    } catch (e) {
      console.warn('Vanta.js cleanup error:', e)
    }
  }
  vantaEffect.value = null
})
</script>

<template>
  <div class="index-page" ref="vantaContainer">
    <div class="welcome-container">
      <h1>欢迎来到数据可视化平台</h1>
      <p>这是一个基于Vue3和ECharts的数据可视化项目</p>
      <button class="enter-btn" @click="goToDataVisualization">进入数据可视化</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index-page {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .welcome-container {
    position: relative;
    z-index: 10;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    color: #fff;
    max-width: 600px;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: #fff;
    }

    p {
      font-size: 1.2rem;
      margin-bottom: 30px;
      color: rgba(255, 255, 255, 0.8);
    }

    .enter-btn {
      background-color: #202428;
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 1.2rem;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: #202428;
        transform: scale(1.05);
      }
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .index-page {
    .welcome-container {
      padding: 30px;
      max-width: 90%;

      h1 {
        font-size: 2rem;
      }

      p {
        font-size: 1rem;
      }

      .enter-btn {
        padding: 10px 25px;
        font-size: 1rem;
      }
    }
  }
}
</style>